<!--  -->
<template>
    <van-config-provider :theme-vars="themeVars">
        <div class="orderdetail-container">
            <div class="orderdetail-statusbar">
                <steps
                    class="order-steps"
                    :steps="steps"
                    :activeIndex="activeIndex" />
            </div>
            <div class="orderdetail-ordercontent">
                <maintenance-order-detail-card
                    :orderDetial="repairData"
                ></maintenance-order-detail-card>

                <maintenance-order-eval-card
                    v-if="isShowEval"
                    :evalData="evalData">
                </maintenance-order-eval-card>
            </div>
            <!-- <div
                class="editbtnclass"
                v-if="isShoweditBtn">
                <van-button
                    round
                    class="editbtn"
                    @click="goeditorder">编辑详情</van-button>
            </div>
            <order-bottom-panel
                v-if="showbuttonpanel"
                :buttons="buttons"/> -->
        </div>
        <van-dialog
            v-model:show="showdevice"
            confirmButtonText="关闭"
            confirmButtonColor="#000000"
            cancelButtonText="详情"
            cancelButtonColor="#000000"
            :show-cancel-button="isshowedit(repairData.manufacturecode)"
            @cancel="gotoedit"
            @confirm="colsedialog"
        >
            <div
                class="infoclass"
                v-if="repairData.manufacturecode===''">暂无关联设备</div>
            <div
                class="infoclassdetail"
                v-else>
                <device-info
                    contentheight="350px"
                    :uuid="repairData.uuid"
                    :listData="devicedetail"
                    :listSetProps="listprops"/>
            </div>
        </van-dialog>
    </van-config-provider>
</template>

<script>
import { showSuccess, showError } from '@/util/MessageDeal';
import { selfI18n } from '@/i18n';
import { reactive, toRefs, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { ConfigProvider } from 'vant';
import useMaintenanceOrderConfigSetup from '@/setup/maintenanceteam/MaintanceOrderConfigSetup.js';
import Cookies from 'js-cookie';
import { getRepairDataSetup } from '@/setup/repair/RepairOrderDataSetup';
import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat';
import MaintenanceOrderDetailCard from '@/components/maintenance_control/MaintenanceOrderDetail/MaintenanceOrderDetailCard.vue';
import MaintenanceOrderEvalCard from '@/components/maintenance_control/MaintenanceOrderDetail/MaintenanceOrderDetailEvalCard.vue';
import Steps from '@/components/_common/Steps.vue';
// import OrderBottomPanel from '@/components/maintenance_control/common/OrderBottomPanel.vue';
import DeviceInfo from './DeviceInfo.vue';
import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup.js';
import { useProductArchiveDevicesSetup } from '@/setup/productarchive/ProductArchiveDevicesSetup.js';
import { inviteEvaluate } from '@/api/server';
import { apiService } from '@/api/apiService.js';
// import { useStore } from 'vuex';
export default {
    name: 'MaitenanceOrderDetail',
    components: {
        MaintenanceOrderDetailCard,
        MaintenanceOrderEvalCard,
        Steps,
        // OrderBottomPanel,
        [ConfigProvider.name]: ConfigProvider,
        DeviceInfo
    // [ActionBar.name]: ActionBar,
    // [ActionBarButton.name]: ActionBarButton
    },
    props: {
        repairId: String
    },
    setup (props) {
    // /alert(props.repairId);
        const $t = selfI18n;
        const router = useRouter();
        const { getRepairDetail, getRepairReviews, getdevicebyuuid } = getRepairDataSetup();
        const { repairstatus } = getRepairStatusData();
        const { getAllMaintenanceTeamMembers } = useMaintenanceMembersSetup();
        const { getPrdArchDetail } = useProductArchiveDevicesSetup();
        const state = reactive({
            repairData: {},
            evalData: {},
            username: Cookies.get('username'),
            isShowEval: false,
            activeIndex: 0,
            steps: repairstatus
                .filter((status) => status.value !== 'all')
                .map((status) => {
                    return {
                        label: status.label,
                        value: parseInt(status.value)
                    };
                }),
            buttons: [],
            isShowdevice: true,
            showdevice: false,
            devicedetail: {},
            // uuid: '',
            manucode: '',
            showedit: false,
            showbuttonpanel: false
            // isshowedit:true;
        });
        const themeVars = {
            tabbarItemMarginBottom: '0px'
        };
        const {
            isShowRelatedToMeTag,
            isShowPingJiaBtn,
            isShowJieDanBtn,
            isShowPaiDanBtn,
            isShowZhuanPaiBtn,
            isShowJiLuBtn,
            isShowInvitePinjiaBtn,
            isshowdevicedetail,
            isShowdealBtn,
            isShoweditBtn
        } = useMaintenanceOrderConfigSetup(state);
        onBeforeMount(async () => {
            const res = await getRepairDetail(props.repairId, state.username);
            if (res.result !== 'success') {
                return;
            }
            Object.assign(state.repairData, res.value);
            state.repairData = res.value;
            state.manucode = res.value.manufacturecode;
            state.activeIndex = parseInt(state.repairData.status);
            state.showedit = isShoweditBtn.value;
            state.showbuttonpanel = isShowPingJiaBtn.value || isShowJieDanBtn.value || isShowPaiDanBtn.value || isShowZhuanPaiBtn.value || isShowJiLuBtn.value || isShowInvitePinjiaBtn.value || isshowdevicedetail.value || isShowdealBtn.value;
            // 评价
            const reviews = await getRepairReviews(props.repairId, state.username);
            if (reviews.result === 'success') {
                state.evalData = reviews.value;
                state.isShowEval = true;
            } else {
                state.isShowEval = false;
                state.evalData = null;
            }
            if (isshowdevicedetail.value) {
                state.buttons.push({
                    isPrimary: false,
                    text: '设备档案',
                    callback () {
                        const param = {
                            manucode: state.manucode,
                            username: Cookies.get('username')
                        };
                        getPrdArchDetail(param, (data) => {
                            console.log(data);
                            state.devicedetail = data.value;
                            state.showdevice = true;
                        });
                        // router.push({

                        //     name: 'maintenanceservicerecord',
                        //     query: { repairid: props.repairId }
                        // });
                    }
                });
            }

            if (isShowPingJiaBtn.value) {
                state.buttons.push({
                    text: 'evaluate',
                    callback () {
                        router.push({
                            name: 'CustomerRating',
                            params: { repairId: props.repairId, repairPhone: state.repairData.phone }
                        });
                    }
                });
            }

            if (isShowJieDanBtn.value) {
                state.buttons.push({
                    text: 'receive_order',
                    callback () {
                        router.push({
                            name: 'ordertaking',
                            params: { repairId: props.repairId, company: state.repairData.company }
                        });
                    }
                });
            }

            if (isShowZhuanPaiBtn.value) {
                state.buttons.push({
                    text: 'redeploy_order',
                    callback () {
                        router.push({
                            name: 'reassignment',
                            params: { repairId: props.repairId },
                            query: {
                                administrator: state.repairData.administrator,
                                administratoralias: state.repairData.administratoralias,
                                company: state.repairData.company
                            }
                        });
                    }
                });
            }

            if (isShowPaiDanBtn.value) {
                state.buttons.push({
                    text: 'dispatch_order',
                    callback () {
                        router.push({
                            name: 'dispatch',
                            params: { repairId: props.repairId, company: state.repairData.company }
                        });
                    }
                });
            }
            if (isShowJiLuBtn.value) {
                state.buttons.push({
                    isPrimary: false,
                    text: 'order_record',
                    callback () {
                        router.push({

                            name: 'maintenanceservicerecord',
                            query: { repairid: props.repairId }
                        });
                    }
                });
            }
            if (isShowdealBtn.value) {
                state.buttons.push({
                    isPrimary: false,
                    text: '处理',
                    callback () {
                        router.push({
                            name: 'maintenanceservicerecord',
                            query: { repairid: props.repairId }
                        });
                    }
                });
            }
            if (isShowInvitePinjiaBtn.value) {
                state.buttons.push({
                    isPrimary: false,
                    text: '评价链接',
                    callback () {
                        if (state.repairData.evaluateurl) {
                            const cInput = document.createElement('input');
                            cInput.value = state.repairData.evaluateurl;
                            document.body.appendChild(cInput);
                            cInput.select(); // 选取文本域内容;
                            // 执行浏览器复制命令
                            // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
                            // Input要在正常的编辑状态下原生复制方法才会生效
                            document.execCommand('Copy');
                            showSuccess($t('wp_Copied_successfully'));
                            /// 复制成功后再将构造的标签 移除
                            cInput.remove();
                        } else {
                            showError($t('wp_Copied_failed'));
                        }
                    }
                });
                state.buttons.push({
                    isPrimary: true,
                    text: '邀请评价',
                    callback () {
                        apiService({
                            api: inviteEvaluate,
                            param: { repairid: props.repairId },
                            success (result) {
                                showSuccess($t('wp_Sent_successfully'));
                            }
                        });
                    }
                });
            }
        });
        const refData = toRefs(state);
        const goeditorder = () => {
            router.push({
                name: 'editrepairorder',
                query: { repairId: props.repairId }
            });
        };
        const colsedialog = () => {
            state.showdevice = false;
        };
        const gotoedit = () => {
            router.push({
                path: '/deviceView',
                query: {
                    uuid: state.devicedetail.uuid,
                    customer_id: state.devicedetail.customer_id,
                    product_id: state.devicedetail.product_id,
                    manufacturecode: state.devicedetail.manufacturingCode
                }
            });
        };
        const isshowedit = (val) => {
            if (val === '' || val === undefined) {
                return false;
            } else {
                return true;
            }
        };
        return {
            isShowRelatedToMeTag,
            isShowPingJiaBtn,
            isShowJieDanBtn,
            isShowPaiDanBtn,
            isShowZhuanPaiBtn,
            isShowJiLuBtn,
            isShowInvitePinjiaBtn,
            isShoweditBtn,
            themeVars,
            repairstatus,
            ...refData,
            goeditorder,
            getAllMaintenanceTeamMembers,
            getdevicebyuuid,
            colsedialog,
            gotoedit,
            isshowedit,
            getPrdArchDetail
        };
    },
    data () {
        return {
            listprops: [{
                id: 'devalias',
                label: '设备别名'
            }, {
                id: 'manufacturingCode',
                label: '出厂编号'
            }, {
                id: 'customer_name',
                label: '所属客户'
            }, {
                id: 'maintainer',
                label: '维保负责人',
                formatter: (detail) => {
                    const value = detail.maintainer || '--';
                    const alias = this.friendsObj && this.friendsObj[value];
                    const allalias = value + (alias ? ` (${alias})` : ' ');
                    return allalias || value;
                }
            },
            // {
            //     id: 'uuid',
            //     label: '设备号'
            // },
            {
                id: 'model',
                label: this.$st('chan-pin-xing-hao')
            }, {
                id: 'devicemanager',
                label: '客户负责人'
            }, {
                id: 'devicemanagerphone',
                label: '联系方式'
            }, {
                id: 'address',
                label: '地区',
                formatter: (detail) => {
                    return detail.address && detail.address.country ? detail.address.country + detail.address.province + detail.address.city : '--';
                }
            }, {
                id: 'label',
                label: '标签',
                type: 'label-btn'
            }, {
                id: 'remark',
                label: '备注'
            }],
            friendsObj: {},
            islogin: this.$store.state.islogin
        };
    },
    created () {
        this.onActivated();
    },
    computed: {

    },
    methods: {
        async onActivated () {
            const tmp = await this.getAllMaintenanceTeamMembers();
            tmp.value.forEach((item) => {
                this.friendsObj = reactive({ ...this.friendsObj, [item.account]: item.alias });
            });
        }
    }
};
</script>
<style>
/* :root {
  --van-tabbar-item-margin-bottom: 0px;
} */
</style>
<style lang='scss' scoped>
.orderdetail-container {
  //   background: linear-gradient(180deg, #3875c6, rgba(56, 117, 198, 0) 100%);
  height: 100vh;
  overflow: scroll;
  background-attachment: fixed;
  background: linear-gradient(
    180deg,
    #3875c6,
    rgba(56, 117, 198, 0) 70%,
    rgba(56, 117, 198, 0) 100%
  );

  // background:red
}
.infoclass{
    padding: 16px 0px 16px 0px;
   text-align: center;

}
.orderdetail-ordercontent {
  margin-bottom: 10px;
}
.editbtnclass{
    text-align: center;

    .editbtn{
        width: 345px;
        height: 44px;
    }
}
.orderdetail-statusbar {
  background-color: transparent;
  margin-left: 16px;
  margin-right: 16px;
}
.order-steps {
  margin-top: 20px;
 margin-bottom: 12px;
  background-color: transparent;
}

.footer-button {
  width: 108px;
  height: 40px;
}
</style>
